<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
	
	<style type="text/css">
		.jing{
			width: 400px;
			margin: 0 ;
			min-height: 600px;
			border: 1px solid #ccc ;
			margin-top: 80px;	

		}

		.header{
			height: 45px;
			line-height: 45px;
			background-color: #97cbff ;
			color: #fff;
		}

		.header h3{
			margin: 0;
			padding-right: 40px;
			text-align: center;
		}

		.item button{
			background-color:pink;
			color: #fff;
			height: 35px;
			line-height: 35px;
			margin-top: 30px;
			margin-right:10px;
			border: none;
		}

		.area-wrapper{
			padding-left: 10px;
		}
	

	</style>	
		

</head>
<body>
<div class="jing">
	<div class="header">
		<h3><span class="iconfont icon-fanhui" style="float:left;margin-left:30px;font-size:20px;"></span>选择省份</h3>
	</div>
	<div class="area-wrapper" style="position: relative;">

	<div class="province item">
		<button>广西壮族自治区</button>
		<button>广东</button>
		<button>河南</button>
		<button>湖南</button>
	</div>

	<div class="city item" style="position:absolute;top: 0;right: -400px;border: 1px solid #ccc;width: 400px; display: none">
		<button>南宁</button>
		<button>来宾</button>
		<button>柳州</button>
		<button>惠州</button>
		<button>深圳</button>
		<button>广州</button>
		<button>郑州</button>
		<button>开封</button>
		<button>洛阳</button>
		<button>长沙</button>
		<button>株洲</button>
		<button>湘潭</button>

	</div>

	<div class="area item" style="position:  absolute;top: 45px;right: -800px;border: 1px solid #ccc;width: 400px; display: none">
		<button>西乡塘区</button>
		<button>江南区</button>
		<button>青秀区</button>
		<button>福锦区</button>
		<button>兴宾区</button>
		<button>象州县</button>
		<button>鱼峰区</button>
		<button>城中区</button>
		<button>柳城县</button>
		<button>惠阳区</button>
		<button>惠东县</button>
		<button>博罗县</button>
		<button>宝安区</button>
		<button>福田区</button>
		


	</div>


</div>

</div>
	
	
<script type="text/javascript" src="js/jquery3.js"></script>
<script type="text/javascript">

	$('.icon-fanhui').click(function(){
		console.log('--我要返回去--');

		var cflag=$('.city').css('display');

		var aflag=$('.area').css('display');

		if(cflag=='block' && aflag=='block'){
			$('.area').hide();
		}
		if (cflag=='block' && aflag=='none') {
			$('.city').hide();
		}


		console.log('city 的显/隐状态'+cflag);

	})


	function compselect(){
		$('.city').hide();
		$('.area').hide();
	}


		function showarea(btn){
			var cid = $(btn).val();

			$('.province').show();
			$('.area').show();
			$('.city').show();

			$.get('js/area.json',function(res){
				var tmp = [];
				for(var i=0;i<res.length;i++){
					if(cid==res[i].pid){
						tmp.push(res[i]);
					}
				}

			$('.area').empty();

				for(var i=0;i<tmp.length;i++){
					
					var btn = '<button onclick="compselect()" value="'+tmp[i].id+'">'+tmp[i].name+'</button>';
					$('.area').append(btn);
				}


			})
		}



		function showcity(btn){
			var pid = $(btn).val();

			$('.province').show();
			$('.area').hide();
			$('.city').show();

			$.get('js/city.json',function(res){
				var tmp = [];
				for(var i=0;i<res.length;i++){
					if(pid==res[i].pid){
						tmp.push(res[i]);
					}
				}

			$('.city').empty();

				for(var i=0;i<tmp.length;i++){
					var btn='';
					var btn = '<button onclick="showarea(this)" value="'+tmp[i].id+'">'+tmp[i].name+'</button>';
					$('.city').append(btn);
				}


			})
		}


		function InitProvince(){
			$('.province').empty();
			$.get('js/province.json',function(res){
				for(var i=0;i<res.length;i++){
					var btn='';
					var btn = '<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
					$('.province').append(btn);
				}
			})
		}


			InitProvince();
</script>
	

	
</body>
</html>
